<template>
<!-- 余额页 -->
  <view class="balance wap">
    <view class="row bg mt30 con">
        <view class="col_16">
            <view class="tab f2 c2">余额</view>
            <view class="num c1 fs64 mt40">{{userNums.Balance}}</view>
        </view>
        <view class="col_8">
            <!-- <view class="link f2 c1" @click="nav_to('/pages/user/balance_list')">余额明细</view> -->
        </view>
    </view>
    
    <view class="title f1 c1 mt30">
        余额提现 <text class="f3 c_red" v-show="priceStr > userNums.Balance">当前金额不足</text>
    </view>

    <view class="bg inputbox mt30">
        <view class="f1 c1">¥</view>
        <input type="decimal" placeholder="请输入您提现的金额" v-model="priceStr">
    </view>


    <!-- <view class="num_list">
        <view class="item bg" :class="{'curr':item == currIndex}" @click="setCurrIndex(item)" v-for="item in list">
            <view class="num">{{item}}</view>
        </view>
    </view> -->

    <view class="btn mt40" @click="sub">提现</view>


    <view class="balance_list" >
        <view class="f1 c1 fwb">账单明细</view>
        <view class="bg mt10">
            <view class="item row" v-for="(item,index) in list" :key="index">
                 <view class="col_18">
                    <view class="f1 c1">{{item.PayType}}</view>
                    <view class="f3 c3 time">{{ getDataTime(item.CreateTime)}}</view>
                </view>
                <view class="col_6 f1  num" :class="{'add':(item.Money > 0),'reduce':(item.Money < 0)}">
                    {{item.Money}}
                </view>
            </view>
        </view>
        <u-empty mode="list" :show="Array.isArray(list) && list.length == 0" iconSize="32" text="暂无数据"></u-empty>
  </view>
  </view>
</template>

<script>
export default {
    data(){
        return{
            userNums:{},
            currIndex:0,
            price:0,
            priceStr:"",
            list:[]
        }
    },
      computed:{
            getDataTime(){
                return l => {
                    console.log(l);
                    let d = new Date(l);
                    let timestamp = d.getTime();
                    return this.$u.date(timestamp,'yyyy年mm月dd日 hh时MM分');
                }
            }
    },
    methods:{
        setCurrIndex(item){
            this.currIndex = item;
            this.price = this.item;
        },
        async getSaleChannelDetail(){
				let res = await this.$api.post('/SaleChannel/SaleChannelDetail',{CompanyID:6002});
				this.userNums = res.data;
		},
        async sub(){
            if(this.priceStr > this.userNums.Balance){
                this.$pv.msg('当前余额不足');
                return false;
            }
            if(this.priceStr < 0){
                this.$pv.msg('金额填写错误');
                return false;
            }
            this.$pv.load();
            let res = await this.$api.post('/SaleChannel/Deposit',{Money:this.price});
            if(res.code == 0){
                this.$pv.msg('提现成功')
            }else{
                this.$pv.msg(res.message);
            }
            
            this.$pv.msg()
           
        },
        async getList(){
            console.log('0----------000')
            let res = await await this.$api.post('/Wallet/MyRecharge');
            this.list = res.data;
            this.load = true;
        },
    },
    watch:{
        priceStr(newVal){
            this.price  = parseFloat(newVal)
        }
    },
    onShow(){
        this.getSaleChannelDetail();
        this.getList();
    }
}
</script>

<style lang="scss">
.c_red{
    padding-left: 10rpx;
    color: #ff4567;
}
.bg{
    background: #262626;
    border-radius: 16rpx;
}
.mt30{
    margin-top: 30rpx;
}
.mt40{
    margin-top: 40rpx;
}
.fs64{
    font-size:  64rpx;
    line-height: 64rpx;
    /* font-weight: bold; */
}
.lh64{
    line-height: 64rpx;
}
.col_16{
    padding-left: 32rpx;
    box-sizing: border-box;
}
.con{
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}
.col_8{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 30rpx;
    box-sizing: border-box;
    .link,
    .num{
        text-align: right;
    }
}
.num_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item{
        margin-top: 30rpx;
        width: 206rpx;
        height: 158rpx;
        display: flex;  
        align-items: center;
        justify-content: center;
        .num{
            font-size: 40rpx;
        }
    }
    &::after{
        content: "";
        display: block;
        width:206rpx;
        height: 1;
    }
    .curr{
        background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
        box-shadow: 0px 4px 6px 0px rgba(106,84,53,0.4);
        .num{
            color: #4C310C ;
        }
    }
}
.inputbox{
    height: 92rpx;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    padding-right: 20rpx;
    input{
        flex: 1;
        height: 92rpx;
        padding-left: 10rpx;
    }
}


.balance_list {
    margin-top: 50rpx;
    padding-bottom: 80rpx;
    .bg {
        background: #262626;
        border-radius: 16rpx;
    }
    .mt30 {
        margin-top: 30rpx;
    }
    .c_sed {
        color: #fdefbb;
    }
    .mt10{
        margin-top: 10rpx;
    }
    .item {
        height: 140rpx;
        align-items: center;
        border-bottom: 1px solid #333;
        .col_18 {
            box-sizing: border-box;
            padding-left: 20rpx;
            .time {
                margin-top: 20rpx;
            }
        }
        .col_6 {
            text-align: right;
            padding-right: 20rpx;
            box-sizing: border-box;
        }
    }
    .add {
        color: #f00;
        &:before {
            content: "+";
        }
    }
    .reduce {
        color: #0f0;
    }
}

</style>